<script lang="ts" setup>
import appStore from '@/store'
import userService from '@/api/userService'
import { useRouter } from 'vue-router'
import { watch } from 'vue'
import { ElMessageBox } from 'element-plus'


const router = useRouter()

const logOut = async () => {
  ElMessageBox.confirm('是否确认退出系统?', '注意', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      userService.logout({ userId: localStorage.getItem('userId') }).then((res) => {
        if (res.status === 200) {
          router.push({ name: 'Login' })
          appStore.publicStore.updateBreadcrum([])
        }
      })
    })
    .catch(() => { })
}
const toHomepage = () => {
  router.push({ name: 'Homepage' })
}

watch(
  () => router.currentRoute.value,
  async () => {
    await router.isReady()
  }
)
</script>
<template>
  <div id="meta-header">
    <div class="header-left">
      <div class="mask" :style="{ width: appStore.publicStore.isCollapse ? '38px' : '253px' }" @click="toHomepage">
        <div class="header-box">
          <svg-icon icon="logo" class-name="header-icon"></svg-icon>
          <svg-icon icon="logo-text" class-name="header-title"></svg-icon>
        </div>
      </div>
      <svg-icon icon="Collapse" @click="appStore.publicStore.updateIsCollapse()"
        style="cursor: pointer; margin-left: 20px"></svg-icon>
    </div>
    <div class="header-right">
      <div class="user-info">
        <el-avatar :size="36" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
        <span>{{ appStore.userStore.name }}</span>
      </div>
      <div class="user-info" @click="logOut"><svg-icon icon="logout"></svg-icon><span>退出登录</span></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#meta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 59px;
  padding: 0 40px 0 0;
  background-color: $blank-color;
  border-bottom: 1px solid $border-color;
  color: $text-color;

  .header-left {
    height: 100%;
    display: flex;
    align-items: center;

    .mask {
      padding-left: 26px;
      background-color: #fff;
      z-index: 2001;
      width: 253px;
      overflow: hidden;
      cursor: pointer;
      border-right: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
    }

    .header-box {
      width: 253px;
      height: 100%;
      line-height: 60px;
      font-size: 20px;
      font-style: oblique;
      font-family: YouSheTitle, YouSheTitle-Normal;
      font-weight: bold;

      svg {
        display: inline-block;
        vertical-align: middle;
      }
    }

    .region-box {
      display: flex;
      align-items: center;
      margin-left: 40px;

      .region-label {
        margin-right: 16px;
      }

      .el-select {
        width: 140px;
      }
    }

    .header-icon {
      width: 25px;
      height: 25px;
      margin-right: 16px;
    }

    .header-title {
      width: 75px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    font-size: 14px;

    span {
      margin-left: 12px;
      color: var(--el-text-color-primary);
    }

    .user-info {
      display: flex;
      align-items: center;
      margin-right: 35px;
      cursor: pointer;

      &:last-child {
        margin: 0;
      }
    }

    :global(.user-dtitle) {
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #8a8e99;
      padding: 0 16px;
    }

    :global(.dtitle-line) {
      width: 2px;
      height: 14px;
      background: #325cb0;
      margin-right: 8px;
    }

    :global(.user-dbottom) {
      height: 90px;
      border-top: 1px solid $border-color;
    }

    :global(.user-dbottom-item) {
      height: 45px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>
